<template>
	<view class="content">
		<!-- 轮播区 -->
		<view class="swiper-area w-full">
			<swiper class="h-full" indicator-dots circular="true" duration="400" :current="swiperIdx"
				@change="swiperChange">
				<swiper-item v-if="goods.video && goods.video.url" class="dflex-c">
					<!-- #ifdef APP -->
					<view class="wh-full pos-r" @click="toVideo">
						<image :src="goods.video.poster" class="wh-full" lazy-load mode="aspectFill"></image>
						<image class="bofang pos-a pos-tl-c" src="/static/images/common/bofang.svg">
						</image>
					</view>
					<!-- #endif -->

					<!-- #ifndef APP -->
					<view class="wh-full pos-r dflex-c" style="background: #000;" @click="toVideo">
						<video id="uVideo" :src="goods.video.url" :poster="goods.video.poster"
							:poster-for-crawler="goods.video.poster" :show-fullscreen-btn="false" :controls="false"
							:show-play-btn="false" :show-center-play-btn="false" :enable-progress-gesture="false"
							@ended="goods.video.pause = true" object-fit="cover" class="h-full"
							style="width: 100%;"></video>

						<image v-if="goods.video.pause" class="bofang pos-a pos-tl-c"
							src="/static/images/common/bofang.svg"></image>

					</view>
					<!-- #endif -->
				</swiper-item>
				<swiper-item v-for="(item, idx) in swiperDatas" :key="idx">
					<view class="wh-full">
						<image :src="item" class="wh-full" lazy-load mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<nx-video v-model="videoShow" :videoObj="goods.video" @exit="videoShow = false;"></nx-video>
	</view>
	<view style="    width: 95%;
    margin: 9px 10px;
    border-radius: 39px;">
		<fui-panel :panelData="panelData" :marginTop="24" :size="32"></fui-panel>
	</view>
	<view style="height: 100vh;">
		<view style="    width: 95%;
		margin: 9px 10px;
		border-radius: 39px;">
			<image style="height: 133px;
    width: 100%;
    border-radius: 10px;" src="https://pic.imgdb.cn/item/672c6b4dd29ded1a8ce46877.png"></image>
		</view>
		<view>
			<view class="container">
				<view class="title">交流反馈 (9)</view>
				<view class="grid">
					<view class="grid-item" v-for="(item, index) in items" :key="index">
						<image :src="item.image" class="image" />
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="uni-container">
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="customButtonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>

	</view>


</template>

<script>
	import {
		url
	} from '@/utils/request.js';
	import {
		jerrybanner
	} from '@/components/jerry-banner/jerry-banner.vue'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	export default {
		data() {
			return {
				items: [{
						image: 'http://img.netbian.com/file/2024/0323/small0012132yPPt1711123933.jpg'
					},
					{
						image: 'http://img.netbian.com/file/2024/0323/small0012132yPPt1711123933.jpg'
					},
					{
						image: 'http://img.netbian.com/file/2024/0323/small0012132yPPt1711123933.jpg'
					},
					{
						image: 'http://img.netbian.com/file/2024/0323/small0012132yPPt1711123933.jpg'
					},
					{
						image: 'http://img.netbian.com/file/2024/0323/small0012132yPPt1711123933.jpg'
					},
					{
						image: 'http://img.netbian.com/file/2024/0323/small0012132yPPt1711123933.jpg'
					},
					{
						image: 'http://img.netbian.com/file/2024/0323/small0012132yPPt1711123933.jpg'
					},
					{
						image: 'http://img.netbian.com/file/2024/0323/small0012132yPPt1711123933.jpg'
					},
					{
						image: 'http://img.netbian.com/file/2024/0323/small0012132yPPt1711123933.jpg'
					},
				],
				options: [{
					icon: 'star',
					text: '想要'
				}],
				buttonGroup: [
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				customButtonGroup: [
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
						color: '#fff'
					}
				],
				customButtonGroup1: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}],
				isapp: false,
				swiperIdx: 0,
				panelData: {

					list: [{
						title: this.Ordersprice,
						desc: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。',
					}]
				},
				// 商品数据
				goods: {
					video: {
						url: "https://mp-b35bac59-8c68-4e5a-86c9-99ba1b58193d.cdn.bspapp.com/cloudstorage/50c7fbb5-77ad-45cd-8944-aed805d7e2e1.mp4",
						poster: 'http://img.netbian.com/file/2024/0323/small0012132yPPt1711123933.jpg',
						pause: true
					}
				},
				swiperDatas: [
					'https://mp-b35bac59-8c68-4e5a-86c9-99ba1b58193d.cdn.bspapp.com/cloudstorage/f583325d-730a-4863-a03f-651f9a97ddb2.png',
				],
				videoShow: false,
				Ordersprice: 0
			}
		},
		onLoad(option) {
			const appItem = JSON.parse(decodeURIComponent(option.appItem));
			console.log(appItem); // 输出解码后的数据

			// 如果 appItem 是数组
			this.Ordersprice = appItem[0]; // 获取价格
			const imageUrl = appItem[1]; // 获取图片 URL
			const title = appItem[2]; // 获取标题
			this.panelData.list[0].title = appItem[0]; // 将 title 设置为 appItem[0]
			this.panelData.list[0].desc = appItem[2]
			this.swiperDatas[0] = imageUrl
			this.goods.video.poster = imageUrl
			console.log(this.panelData); // 验证 panelData 是否更新成功


		},
		onShow(options) {
			// #ifdef APP || APP-NVUE
			this.isapp = true;
			// #endif
		},
		methods: {
			toVideo() {
				// #ifdef APP
				this.videoShow = true;
				return;
				// #endif
				if (!this.uVideo) this.uVideo = uni.createVideoContext('uVideo', this);
				if (this.uVideo.isplay) {
					this.uVideo.pause();
					this.uVideo.isplay = false;
					this.goods.video.pause = true;
					return;
				}
				this.uVideo.isplay = true;
				this.goods.video.pause = false;
				// this.goods.video.loaded = true;
				this.uVideo.play();
			},
			swiperChange(res) {
				if (res.detail && res.detail.current !== 0 && this.uVideo) {
					this.uVideo.pause();
					this.uVideo.isplay = false;
					this.goods.video.pause = true;
				}
			},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				console.log(e)
				this.options[2].info++
			}

		}
	}
</script>

<style lang="scss">
	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	page {
		background-color: #f6f6f6;
	}

	/* 轮播区 */
	.swiper-area {
		height: 40vh;
		z-index: 0;
	}

	.dflex-c {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bofang {
		width: 50px;
		height: 50px;
	}

	.pos-r {
		position: relative;
	}

	.pos-a {
		position: absolute;
	}

	.pos-tl-c {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* 宽高 */
	/* #ifdef APP-NVUE */
	.w-full {
		flex: 1;
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	.wh-full {
		width: 100%;
		height: 100%;
	}

	.w-full {
		width: 100%;
	}

	/* #endif */

	.h-full {
		height: 100%;
	}

	.container {
		padding: 20rpx;
		text-align: center;
	}

	.title {
		font-size: 32rpx;
		text-align: left;
		/* font-weight: bold; */
		margin-bottom: 20rpx;
	}

	.grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.grid-item {
		width: 32%;
		height: 165px;
		/* 三列布局，每行三个图像 */
		margin-bottom: 20rpx;
	}

	.image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 保持图片比例，不变形 */
		border-radius: 8rpx;
		/* 可选，增加圆角效果 */
	}
</style>